<html>
<head>
<title> .:: Juego del ahorcado Codes and Tags ::. </title>
<style type="text/css">
body {
	background: black;
	color: #000;
	font-family: helvetica, arial;
	font-size: 13px;
}

#juego {
	background-color: #efefef;
	width: 850px;
	border: 15px solid #444;
	-webkit-border-radius: 15px/20px;
	-moz-border-radius :  15px/20px;
	height: 500px;
	margin: 0px auto;
	margin-top: 20px;
	font-family: helvetica, arial;
	font-size: 13px;
}

#datos {
	width: 150px;
	border-right: 1px solid #444;
	float: left;
	height: 310px;
	padding: 20px;
	margin-top: 10px;
	font-size: 13px;
}

#resultado {
	width: 550px;
	float: left;
	padding: 20px;
	margin-top: 20px;
	margin-left: 50px;
	font-size: 13px;
	font-family: helvetica, arial;
}

#resultado span {
	text-transform: uppercase;
}

#resultado table td{
	font-family: helvetica;
	font-size: 13px;
	padding:0px 10px;
}

#dibujo {
	margin: auto;
	margin-top: -20px;
	margin-left: 80px;
	width: 350px;
	height: 200px;
	border: 0px solid #444;
	float: left;
}

#palo-vertical {
	position: absolute;
	border-right: 20px solid #345;
	border-bottom: 2px solid #373;
	margin: auto;
	margin-top: 10px;
	margin-left: 10px;
	height: 200px;
	width: 300px;
}

#cabeza {
	position: absolute;
	margin: auto;
	margin-top: 20px;
	margin-left: 200px;
	width: 30px;
	background-color: #000;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-color: 1px solid #333;
	height: 30px;
	display: none;
}

#cuerpo {
	position: absolute;
	margin: auto;
	margin-top: 50px;
	margin-left: 195px;
	width: 40px;
	background-color: #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-color: 1px solid #333;
	height: 50px;
	display: none;
}

#piernas {
	position: absolute;
	width: 5px;
	margin: auto;
	margin-top: 93px;
	margin-left: 198px;
	border-left: 15px solid #000;
	border-right: 15px solid #000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	height: 30px;
	display: none;
}

#brazos {
	position: absolute;
	margin: auto;
	margin-top: 55px;
	margin-left: 165px;
	width: 100px;
	border-top: 7px solid #000;
	border-bottom: 7px solid #000;
	height: 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	display: none;
}

#cuerda {
	position: absolute;
	margin: auto;
	margin-top: 47px;
	margin-left: 190px;
	width: 120px;
	border-top: 2px dashed #e55;
	border-bottom: 2px dotted #e55;
	height: 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	display: none;
}

#informacion {
	padding: 10px 20px;
}
</style>

<script language="javascript">
	//Para los intentos
	var juegoPalabras = new Array("cocoman", "celular", "vaso", "pitillo",
			"lampara", "esfero", "codes", "google","medicina","aguacate","murcielago","arbol","hakunamatata");
	var letrasUtilizadas = "";
	var MAXINTENTOS = 4;
	var intentos = 0;
	//Palabra a encontrar
	var palabraOculta = "";
	var palabraActual;
	//Para pedir cada letra
	var letra = "";

	/***
	 * Configuracion del juego
	 ***/
	function comenzarJuego() {

		var index = Math.floor(Math.random() * juegoPalabras.length);
		palabraOculta = juegoPalabras[index].toUpperCase();
		palabraActual = new Array(palabraOculta.length);
		letrasUtilizadas = "";
		intentos = 0;

		document.getElementById('cabeza').style.display = 'none';
		document.getElementById('cuerpo').style.display = 'none';
		document.getElementById('brazos').style.display = 'none';
		document.getElementById('piernas').style.display = 'none';
		document.getElementById('cuerda').style.display = 'none';
		document.forms[0].elements['letra'].focus();

		//Llena la palabra actual con espacios
		for ( var i = 0; i < palabraActual.length; i++) {
			palabraActual[i] = 0;
		}

		mostrarInformacion();
	}

	function validarPalabra(letra) {

		var encontroPalabra = false;
		var coincidencias = 0;
		letrasUtilizadas += letra.toUpperCase() + " ";

		//Aqui esta la magia que valida si la palabra existe			
		for ( var i = 0; i < palabraActual.length; i++) {
			if (letra.charAt(0).toUpperCase() == palabraOculta.charAt(i)) {
				palabraActual[i] = 1;
				encontroPalabra = true;
			}
		}

		if (!encontroPalabra) {
			intentos++;
		}

		//Validaciones para mostrar el morraco
		if (intentos == 1) {
			document.getElementById('cabeza').style.display = 'block';
		}

		if (intentos == 2) {
			document.getElementById('cuerpo').style.display = 'block';
		}
		if (intentos == 3) {
			document.getElementById('brazos').style.display = 'block';
			document.getElementById('piernas').style.display = 'block';
		}
		if (intentos == 4) {
			document.getElementById('cuerda').style.display = 'block';
		}

		//Muestra la informacion actual del juego
		mostrarInformacion();

		//Valida si gano el juego
		for ( var i = 0; i < palabraActual.length; i++) {
			if (palabraActual[i] == 1) {
				coincidencias++;
			}
		}
		if (coincidencias == palabraOculta.length) {
			ganarJuego();
		}

		if (intentos == MAXINTENTOS) {
			palabraActual = palabraOculta;
			mostrarInformacion();
			gameOver();
		}
		
		document.forms[0].elements['letra'].focus();
		document.forms[0].elements['letra'].value = "";
	}

	function gameOver() {
		alert("Changos!!! - Game Over =( ");
		if (confirm(" Deseas a jugar otra vez ?")) {
			comenzarJuego();
		} else {
			alert("Gracias por jugar =)");
		}
	}

	function ganarJuego() {
		alert("Felicidades Has Ganado! ");
		if (confirm(" Deseas a jugar otra vez ?")) {
			comenzarJuego();
		} else {
			alert("Gracias por jugar =)");
		}
	}

	/**
	 * Muestra la informacion con cada intento de palabra
	 **/
	function mostrarInformacion() {

		//Obtiene la palabra visible
		var palabraVisible = "";
		for ( var i = 0; i < palabraActual.length; i++) {
			if (palabraActual[i] != 0) {
				palabraVisible += "<span> " + palabraOculta.charAt(i)
						+ " </span>";
			} else {
				palabraVisible += "<span> __ </span>";
			}
		}

		var informacionJuego = "<div id='informacionJuego'> ";
		informacionJuego += "<table>";
		informacionJuego += "   <tr>";
		informacionJuego += "      <td> Max. Numero de Intentos </td>";
		informacionJuego += "      <td><strong>" + MAXINTENTOS + "</strong></td>";
		informacionJuego += "   </tr>";
		informacionJuego += "   <tr>";
		informacionJuego += "      <td> Intentos </td>";
		informacionJuego += "      <td><strong>" + intentos + "</strong></td>";
		informacionJuego += "   </tr>";
		informacionJuego += "   <tr>";
		informacionJuego += "      <td> Palabra Visible </td>";
		informacionJuego += "      <td>" + palabraVisible + "</td>";
		informacionJuego += "   </tr>";
		informacionJuego += "   <tr>";
		informacionJuego += "      <td> Letras Utilizadas </td>";
		informacionJuego += "      <td><span>" + letrasUtilizadas
				+ "</span></td>";
		informacionJuego += "   </tr>";
		informacionJuego += "</table>";
		informacionJuego += "</div>";

		document.getElementById('resultado').innerHTML = informacionJuego;
	}

	function recorrerPalabra() {

		//var codigo = "";
		for ( var i = 0; i < palabra.length; i++) {
			//alert(palabra.charAt(i));
			//codigo += "<br/>" + palabra.charAt(i);
			document.getElementById('resultado').innerHTML = palabra.charAt(i);
		}
		//document.getElementById('resultado').innerHTML = codigo; 		   
	}
</script>
</head>
<body onload="comenzarJuego()">
	<div id="juego">
		<div id="informacion">
			<h2>Juego del ahorcado en JavasCript y CSS</h2>
			Este es el famoso juego del ahorcado donde te dan una palabra oculta,
			y en cada letra que ingreses tienes la posibilidad de encontrar una o
			varias coincidencias. El objetivo del juego es encontrar una palabra
			completa sin superar la maxima cantidad de intentos establecida.
			Bien, <strong>Hakuna Matata</strong> :D y que disfrutes el juego.
		</div>
		<div id="datos">
			<form>
				<table>
					<tr>
						<td>Letra</td>
						<td><input type="text" name="letra" maxlength="1" size="3"
							style="text-transform: uppercase"/></td>
					</tr>
					<tr>
						<td colspan="2">
						<input type="button" name="enviar" value="validar"
							onclick="validarPalabra(form.letra.value)"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div id="resultado"></div>
		<div id='dibujo'>
			<div id='cabeza'>&nbsp;</div>
			<div id='cuerpo'>&nbsp;</div>
			<div id='piernas'>&nbsp;</div>
			<div id='brazos'>&nbsp;</div>
			<div id='cuerda'>&nbsp;</div>
			<div id='palo-vertical'>&nbsp;</div>
		</div>
	</div>
</body>
</html>